<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>文章列表</span>
            </div>
            <!-- 搜索区域 -->
            <div class="search-box">
                <el-form :inline="true" :model="q">
                    <el-form-item label="文章分类">
                        <el-select v-model="q.cate_id" placeholder="请选择分类" size="small">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="发布状态" style="margin-left: 15px;">
                        <el-select v-model="q.state" placeholder="请选择状态" size="small">
                            <el-option label="已发布" value="已发布"></el-option>
                            <el-option label="草稿" value="草稿"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="small">筛选</el-button>
                        <el-button type="info" size="small">重置</el-button>
                    </el-form-item>
                </el-form>
                <!-- 发表文章的按钮 -->
                <el-button @click="CateVisible = true" type="primary" size="small" class="btn-pub">发表文章</el-button>
            </div>

            <!-- 文章表格区域 -->

            <!-- 分页区域 -->
        </el-card>
        <!-- 添加文章的dialog -->

        <el-dialog title="发表文章" fullscreen :visible.sync="CateVisible" width="30%" :before-close="handleClose">
            <el-form :model="pubForm" :rules="pubRules" ref="pubForm" label-width="100px" class="demo-pubForm">
                <el-form-item label="文章标题" placeholder="请输入文章标题" prop="title">
                    <el-input v-model="pubForm.title"></el-input>
                </el-form-item>
                <el-form-item label="文章分类" prop="cate_id">
                    <el-select style="width:100%;" v-model="pubForm.cate_id" placeholder="请输入文章分类">
                        <el-option v-for="item in cateList" :key="item.id" :label="item.cata_name" :value="item.id">
                        </el-option>

                    </el-select>
                </el-form-item>

                <el-form-item label="文章内容" prop="content">
                    <!-- 富文本编辑器 -->
                    <!-- 失去焦点校验时手动检验该字段（当前content属性值） -->
                    <quill-editor v-model="pubForm.content" @blur="$refs.pubForm.validateField('content')">
                    </quill-editor>

                </el-form-item>
            </el-form>

        </el-dialog>

    </div>
</template>

<script>
export default {
    name: 'ArtList',
    data() {
        return {
            CateVisible: false,
            cateList: [],
            pubForm: {
                title: '',
                cate_id: '',
                content: '',
            },
            pubRules: {
                title: [
                    { required: true, message: "请输入文章标题", trigger: "blur" },
                    { min: 1, max: 30, message: "请输入文章标题", trigger: "blur" }
                ],
                cate_id: [
                    { required: true, message: "请选择分类", trigger: "blur" },
                ],
                content: [
                    { required: true, message: "请输入内容", trigger: "blur" },
                ]
            },
            // 查询参数对象
            q: {
                pagenum: 1,
                pagesize: 2,
                cate_id: '',
                state: '',
            }
        }
    },
    created() {
        this.getCateList()
    },
    methods: {
        handleClose(done) {
            this.$confirm('确认关闭吗？', '提醒', { type: "warning" })
                .then(() => {
                    done();
                })
                .catch(() => { });
        },
        async getCateList() {
            // 发送请求获取数据
            const { data: res } = await this.$http.get('/my/cate/list')
            if (res.code !== 0) return
            this.cateList = res.data
        }
    },
}
</script>

<style lang="less" scoped>
.search-box {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    .btn-pub {
        margin-top: 5px;
    }
}

/deep/ .ql-editor {
    height: 300px;
}
</style>
